<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta name="format-detection" content="telephone=no" />
    {% load forum_extras %}
    <title>{% block title %}F2E - 前端技术社区{% endblock %}</title>
    <script type="text/javascript" src="/static/js/base/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="/static/js/base/bootstrap.min.js"></script>
    <script type="text/javascript" src="/static/js/base/in-min.js"></script>
    <link rel="stylesheet" href="/static/css/bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="/static/css/main.css?t=20130807001.css" />
    <link rel="apple-touch-icon" href="/static/images/f2e.im.icon.png">
    {% block stylesheet %}{% endblock %}
    {% block javascript %}{% endblock %}
    <script type="text/javascript">
        jQuery(document).ready(function() {
            $('.J_search').submit(function(e) {
                var _node = $(this);
                var query = _node.find('input').val();
                e.preventDefault();
                window.open('http://www.google.com/search?q=site:f2e.im/t%20' + query, "_blank");
            });
        });
    </script>
    {% comment %}
    <script type="text/javascript" src="/static/js/widget/jquery.scrolltotop-min.js"></script>
    {% endcomment %}
    <style type="text/css">
        .totop a {
            display: block;
            width: 40px;
            height: 35px;
            background: url('/static/images/totop.gif') no-repeat;
            text-indent: -9999px;
            text-decoration: none;
        }

        .totop a:hover {
            background-position: 0 -35px;
        }
    </style>
    {% comment %}
    <script type="text/javascript">
        jQuery(document).ready(function() {
            $.scrolltotop({
                className: 'totop',
                controlHTML: '<a href="javascript:;">回到顶部↑</a>',
                offsety: 10
            });
        });
    </script>
    {% endcomment %}
</head>
<body>

<div class="navbar navbar-inverse navbar-fixed-top top-navbar">
    <div class="navbar-inner">
        <div class="container">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>
            <a class="brand" href="/">F2E</a>
            <div class="divider-vertical"></div>
            {% if user.is_authenticated %}
                {% if notifications_count %}
                    <a href="/notifications/" class="notification-indicator tooltipped downwards contextually-unread" title="{% if user.nickname %}{{ user.nickname }}{% else %}{{ user.nickname }}{% endif %}，你有{{ notifications_count }}条未读提醒，去看看吧">
                        <span class="mail-status unread"></span>
                    </a>
                {% else %}
                    <a href="/notifications/" class="notification-indicator tooltipped downwards" title="暂时没有未读提醒">
                        <span class="mail-status"></span>
                    </a>
                {% endif %}
                <div class="divider-vertical"></div>
            {% endif %}
            <div class="nav-collapse collapse">

                {% comment %}
                {% set navigation_bar = [
                    ('/', 'topic', '社区'),
                    ('/members', 'members', '成员'),
                    ('/hots', 'hots', '热门'),
                    ('/nodes', 'nodes', '结点'),
                    ('/info', 'info', '信息'),
                ] -%}

                {% set navigation_bar = [
                    ('/', 'topic', '社区'),
                    ('/members', 'members', '成员'),
                    ('/static/pages/timeline/index.html', 'timeline', '大事记'),
                    ('/static/pages/nav/index.html', 'nav', '导航'),
                ] -%}

                {% set active_page = active_page|default('index') -%}
                {% endcomment %}

                {% if active_page %}
                <ul class="nav">
                    {% for href, id, caption in navigation_bar %}
                        <li{% ifequal id active_page %} class="active"{% endifequal %}>
                            <a href="{{ href|escape }}">{{ caption|escape }}</a>
                        </li>
                    {% endfor %}
                </ul>
                {% else %}
                <ul class="nav">
                    {% for href, id, caption in navigation_bar %}
                    <li{% ifequal id 'index' %} class="active"{% endifequal %}>
                    <a href="{{ href|escape }}">{{ caption|escape }}</a>
                </li>
                {% endfor %}
                </ul>
                {% endif %}
            </div>
            <!--/.nav-collapse -->
            <form class="navbar-search pull-left J_search">
                <input type="text" class="search-query" placeholder="{#Search#}" x-webkit-speech>
            </form>
            <div class="nav-collapse collapse pull-right">
                <ul class="nav account-menu">
                    {% if user.is_authenticated %}
                        <li>
                            <a href="/u/{% if user.username %}{{ user.username }}{% else %}{{ user.id }}{% endif %}/" class="avatar">
                                <img src="/static/avatar/s_{% if user.avatar %}{{ user.avatar }}{% else %}default.png{% endif %}?t={% gen_random %}" width="20" height="20">
                            </a>
                        </li>
                        <li><a href="/u/{% if user.username %}{{ user.username }}{% else %}{{ user.id }}{% endif %}/">{{ user.username }}</a></li>
                        <li>
                            <a href="/setting/">
                                <span class="octicon octicon-tools"></span>
                            </a>
                        </li>
                        <li>
                            <a href="/logout/">
                                <span class="octicon octicon-log-out"></span>
                            </a>
                        </li>
                    {% else %}
                        <li>
                            <a href="/login/">
                                <span class="octicon octicon-log-in"></span>
                            </a>
                        </li>
                        <li><a href="/register/" class="btn btn-small">注册</a></li>
                    {% endif %}
                </ul>
            </div>
        </div>
    </div>
</div>

<div class="container-fluid container mt15">
    <div class="row-fluid">
        <div class="span9 left">
            {% block main %}{% endblock %}
        </div>

        <div class="span3 right">
            {% block sidebar %}{% endblock %}
        </div>
    </div>
</div>

{% include "snippet/footer.html" %}

</body>
</html>
